Bootstrap 5 Variable Configuration: Customizing Theme Colors and Component Styles

This article introduces how to quickly customize Bootstrap 5 themes through SCSS variables configuration, suitable for beginners. Since the CDN version makes variable modification difficult, installing the Bootstrap SCSS source code is recommended. Prerequisites: Install Bootstrap (`npm install bootstrap`), and create a `scss/custom.scss` file. Core Steps: 1. Modify the theme color: After importing Bootstrap's `functions` and `variables`, customize variables like `$primary` (e.g., set the primary color to purple `#6c5ce7`). Components dependent on these variables will automatically update. New theme colors (e.g., `$warning`) can also be extended. 2. Customize component styles: Adjust button padding (`$btn-padding-y`), card border radius (`$card-border-radius`), navbar background color (`$navbar-bg`), etc., through variables. Compilation: Use the `sass` tool to compile `custom.scss` into CSS and import it into HTML. Notes: Variables must be modified after import to override default values, maintain consistent units, and use tools like Coolors to generate coordinated colors. Summary: Through variable configuration, theme colors and component styles can be efficiently customized to quickly create personalized pages.